<template>
  <div class="zy-content pb50">
    <back-level :go-page="close"></back-level>
    <Card :title="$t('spareParts.ScrapReson')" class="detail-content-layout">
      <div class="basic-info" style="border: none">
        <div class="basic-info-body tableContent">
          <Table :columns="applyTableColumns" :data="applyTablelist"/>
        </div>
      </div>
    </Card>
    <Card :title="$t('common.attachmentData')" class="detail-content-layout mt16">
      <div class="basic-info tableContent" style="border: none">
        <div class="basic-info-title  basic-info-title_bot">
          <template v-if="$route.query.status ==='edit'">
            <Upload :show-upload-list="false"
                    action=""
                    :before-upload="handleBeforeUpload"
            >
              <Button type="primary"  icon="ios-cloud-upload-outline">{{ $t('common.Upload') }}</Button>
<!--                    <span-->
<!--                        style="height: 30px;width: 30px;-->
<!--                     display: inline-block;-->
<!--                     cursor: pointer;margin-left: 5px;">-->
<!--                      上传-->
<!--               <Icon type="ios-cloud-upload-outline"-->
<!--                     color="#187BDB"-->
<!--                     style="width: 100%;height: 100%; font-size: 30px;"/>-->
<!--                        </span>-->
            </Upload>
          </template>
        </div>
        <div class="mt16">
          <Row>
            <template v-for="item in uploadList">
              <Col span="4" :key="item.fileName"
                   style="color: #187bdb; border: 1px solid #91d5ff; margin: 0 10px 0 0;padding: 5px;border-radius: 5px;">
                 <span style="font-size: 15px;">
                   {{item.fileName}}
                 </span>
                <template v-if="$route.query.status ==='edit'">
                     <span
                         @click="fileDelete(item)"
                         style="width: 30px;height: 30px;cursor: pointer; text-align: center; line-height: 30px;">
                       <Icon type="ios-trash"  style="font-size: 20px;" color="rgb(24, 123, 219)"/>
                     </span>
                </template>
              </Col>
            </template>
          </Row>
        </div>
      </div>
    </Card>
    <Card :title="$t('common.ApprovalInformation')" class="detail-content-layout mt16">
      <div class="basic-info tableContent" style="border: none">
        <div class="basic-info-body tableContent">
          <Table :columns="approvalColumns" :data="approvalTablelist"/>
        </div>
      </div>
    </Card>
    <bottom-handle-wrap  v-if="$route.query.status === 'edit'">
      <Button @click.prevent="close">{{$t('common.Cancle')}}</Button>
      <Button type="primary" @click.prevent="onsumbit">{{$t('common.submit')}}</Button>
    </bottom-handle-wrap>
  </div>
</template>

<script>
export default {
  name: "addScrapApply",
  data() {
    return {
      uploadList:[],
      applyTablelist:[],
      approvalColumns:[
        {
          title: `${this.$t('审批节点')}`,
          key: 'processNodeName',
          align: 'center'
        },
        {
          title: `${this.$t('common.Approvedby')}`,
          key: 'approvalByStr',
          align: 'center'
        },
        {
          title: `${this.$t('common.ApprovalTime')}`,
          key: 'approvalTime',
          align: 'center'
        },
        {
          title: `${this.$t('equipmentscrapped.Result')}`,
          key: 'approvalResult',
          align: 'center'
        },
        {
          title: `${this.$t('equipmentscrapped.Comments')}`,
          key: 'scrapApprovalMessage',
          align: 'center'
        },
      ],
      applyTableColumns:[
        {
          title: `${this.$t('equipmentscrapped.ID')}`,
          key: 'backupScrapApplyNo',
          align: 'center',
          minWidth: 160
        },
        {
          title: `${this.$t('spareParts.PartNo')}`,
          key: 'materielNo',
          align: 'center',
          minWidth: 160
        },
        {
          title: `${this.$t('common.SpareNumber')}`,
          key: 'backupNo',
          align: 'center',
          minWidth: 160
        },
        {
          title: `${this.$t('common.GoodsName')}`,
          key: 'goodsName',
          align: 'center',
          minWidth: 140
        },
        {
          title: `${this.$t('spareParts.Specification')}`,
          key: 'specification',
          align: 'center',
          minWidth: 140
        },
        {
          title: `${this.$t('spareParts.company')}`,
          key: 'companyName',
          align: 'center',
          minWidth: 160
        },
        {
          title: `${this.$t('spareParts.Warehouse')}`,
          key: 'warehouseName',
          align: 'center',
          minWidth: 140
        },
        {
          title: `${this.$t('spareParts.Rack')}`,
          key: 'shelfConfigName',
          align: 'center',
          minWidth: 140
        },
        {
          title: `${this.$t('spareParts.Location')}`,
          key: 'locationConfigName',
          align: 'center',
          minWidth: 140
        },
        {
          title: `${this.$t('common.ScrapQuantity')}`,
          key: 'scrapCount',
          align: 'center',
          minWidth: 140
        },
        {
          title: `资产原值`,
          key: 'assetsOriginal',
          align: "center",
          minWidth: 140
        },
        {
          title: `资产残值`,
          key: 'assets',
          align: "center",
          minWidth: 140
        },
        {
          title: `${this.$t('使用年限')}`,
          key: 'useTime',
          align: "center",
          minWidth: 140
        },
        {
          title: `使用部门`,
          key: 'useDept',
          align: "center",
          minWidth: 140
        },
        {
          title: `成本中心`,
          key: 'deptCostCenter',
          align: "center",
          minWidth: 140
        },
        {
          title: '报废原因',
          key: 'scrapReason',
          align: 'center',
          minWidth: 140
        }
      ],
      infoList:{},
      OAList:[],
      approvalTablelist:[],
    }
  },
  mounted() {
    this.getDataList()
    // this.getInfolist()
    //  this.applyTablelist = JSON.parse(localStorage.getItem('scarpList'))
    // if(this.$route.query.status === 'check'){
    //   this.infoList = {
    //     approvalByName:this.applyTablelist[0].approvalByName,
    //     approvalStatus:this.applyTablelist[0].approvalStatus.toString(),
    //     remark:this.applyTablelist[0].remarkInfo
    //   }
    // }
  },
  methods: {
    fileDelete(item){
      this.uploadList = this.uploadList.filter(val=>val.filePath !== item.filePath)
    },
    //文件上传
    handleBeforeUpload(file) {
      let formData = new FormData();
      formData.append("dir", 'device')
      formData.append("file", file)
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      this.axios({
        method: 'post',
        url: '/fileServer/upload',
        data: formData,
        config,
      }).then(res => {
        if (res.code === 200) {
          this.uploadList.push({
            createBy:localStorage.getItem('ziyunFactoryUserId'),
            fileName: res.data.fileName,
            fileUrl: res.data.fileUrl,
            filePath: res.data.filepath,
            suffix: res.data.suffix,
          })
        }
      })
      return false
    },
    getDataList(){
      this.axios({
        method: 'get',
        url: '/dms/backup/scrapApply/info',
        params: {
          id: this.$route.query.id,
          approvalFlowSort:this.$route.query.applyStatus
        }
      }).then(res => {
        if (res.code === 200) {
          this.applyTablelist = res.data.backupScrapApplyVos
          this.approvalTablelist = res.data.approvalVos
          if (res.data.attachmentVOS && res.data.attachmentVOS.length){
            this.uploadList = res.data.attachmentVOS
          }
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
    getApplicationOAList(query) {
      if (query !== '') {
        this.loading = true
        this.axios({
          method: 'get',
          url: '/basic/user/searchOAUser',
          params: {
            key: query
          }
        }).then(res => {
          if (res.code === 200) {
            this.OAList = res.data.map(item => {
              return {
                ...item,
                showName: item.empno + '----' + item.username
              }
            })
          } else {
            this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
          }
        }).finally(() => {
          this.loading = false
        })
      }else {
        this.OAList = []
      }
    },
    onsumbit(){
      const paramsInfo = {
        active:-1,
        scrapSource:0,
        backupScrapApplyVos:[],
        attachmentVOS:[]
      }
      const arr = this.uploadList.filter(val=>val.createBy == localStorage.getItem('ziyunFactoryUserId'))
      paramsInfo.attachmentVOS = arr.map(item=>(
          {
            createBy:localStorage.getItem('ziyunFactoryUserId'),
            updateBy:localStorage.getItem('ziyunFactoryUserId'),
            fileName:item.fileName,
            filePath:item.filePath,
            fileUrl:item.fileUrl,
            suffix:item.suffix
          }
      ))
      const data = {
        ...paramsInfo
      }
      let url = ''
      if (this.$route.query.status === 'edit'){
        data.id = this.$route.query.id
        url = '/dms/backup/scrapApply/update'
      }
      this.axios({
        method: 'post',
        url,
        data
      }).then(res=>{
        if (res.code == 200){
          this.close()
        }else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    },
    close() {
      this.$router.go(-1)
    },
    getInfolist(){
      this.axios({
        method: 'post',
        url: '/dms/dmsBackupScrapApply/approvalStatus',
        data: {
          id:this.$route.query.id,
          approvalBy:this.infoList.createBy,
          approvalStatus:this.infoList.approvalStatus,
          remark:this.infoList.remark
        }
      }).then(res => {
        if(res.code === 200){
          if (res.code == 200){
            this.close()
          }
         this.$Message.success('成功!')
        }else{
          this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
/deep/ .ivu-input{
  border: 1px solid #dcdee2 !important;
}
.tableContent {
  // margin-top: 6px;
  .operationBtn {
    color: #3271f0;
    cursor: pointer;
    margin: 0 10px;
  }
}
.picking{
  height: 95%;
  position: relative;
  //height: 82vh;
  overflow-y: scroll;
  .btnList{
    position: fixed;
    bottom: 20px;
    left: 46%;
    .ivu-btn{
      margin: 0 5px;
    }
  }
}
.ivu-card-body {
  padding: 0;
}

.basic-info {
  //padding: 5px 16px;
  border-bottom: 1px solid #e8eaec;

  .basic-info-body {
    color: #333;
    font-size: 13px;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    margin: 10px;
    .basic-info-body-label {
      width: 100%;
      height: 48px;
      line-height: 48px;
      background: #f5f6f7;
      text-align: center;
      padding-left: 10px;
    }
    .basic-info-body-item {
      height: 48px;
      line-height: 48px;
      text-align: left;
      padding: 0 10px;
      border-left: 1px solid #eee;
      border-right: 1px solid #eee;
    }
  }

  .basic-info-title_bot {
    margin-top: 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .basic-info-title {
    display: flex;
    align-items: center;
    //justify-content: space-between;
    .add{
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 0 10px;
      .addIcon{
        font-size: 28px;
      }
      .addTitle{
        font-size: 16px;
      }
    }
    h2 {
      display: inline-block;
      font-size: 16px;
      padding-left: 10px;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 7px;
        height: 24px;
        background: #187bdb;
      }
    }
  }

  .search-form {
    padding: 0;

    .ivu-form-item {
      margin: 0;
    }
  }
}
</style>
